<template>
  <div class="entrust">
    <div class="headtop">
      <div class="b-back" @click="$router.back(-1)">
        <img class="b-back" src="../../assets/l_jt.png" alt />
      </div>
      <div class="w_tab">
        <div
          class="tab1"
          v-for="(item,index) in btn"
          :key="index"
          @click="tab(index)"
          :class="{active:indexs==index}"
        >{{item}}</div>
      </div>
      <img class="xiaohua" src="../../assets/hua.png" alt />
    </div>
    <div class="view-wrapper" id="example-2">
      <div class="wt_block" v-for="(item, index) in items" :key="index">
        <div class="head">
          <div class="head_left">
            <span class="nsb2" v-if="item.type == 1">买入</span>
            <span class="nsb1" v-else-if="item.type == 2">卖出</span>
            &nbsp;
            <span class="ns2">{{item.ftype}}</span>&nbsp;
            <span class="ns3">{{item.createtime | formatDate}}</span>&nbsp;
            <span class="ns4">{{item.createtime | formatDate1}}</span>
          </div>
          <div class="head_right">
            <span v-if="item.status == 1 && item.sum == 0">
              <button type="button" @click="cancellations(item.id)">撤单</button>
              未成交
            </span>
            <span v-else-if="item.status == 1 && item.sum > 0">
              <button type="button" @click="cancellations(item.id)">撤单</button>部分成交</span>
            <span v-else-if="item.status == 2">完全成交</span>
            <img src="../../assets/r_jt.png" alt />
          </div>
        </div>
        <div class="content1">
          <div class="ns1">
            <p class="ws1">委托价格(USDT)</p>
            <p class="ws2">{{item.price}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">委托数量(BBZ)</p>
            <p class="ws2">{{item.allnumber}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交额(USDT)</p>
            <p class="ws2">{{item.sum}}</p>
          </div>
        </div>
        <div class="content2">
          <div class="ns1">
            <p class="ws1">成交均价(USDT)</p>
            <p class="ws2">{{item.avgprice}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">成交数量(BBZ)</p>
            <p class="ws2">{{item.sum}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交笔数</p>
            <p class="ws2">{{item.count}}</p>
          </div>
        </div>
      </div>

      <div class="wt_block" v-for="(over, index) in overdata" :key="index">
        <div class="head">
          <div class="head_left">
            <span class="nsb1" v-if="over.type == 1">买入</span>
            <span class="nsb2" v-else-if="over.type == 2">卖出</span>
            &nbsp;
            <span class="ns2">{{over.ftype}}</span>&nbsp;
            <span class="ns3">{{over.createtime | formatDate}}</span>&nbsp;
            <span class="ns4">{{over.createtime | formatDate1}}</span>
          </div>
          <!--<div class="head_right">-->
          <!--<span v-if ="over.status == 1 && over.sum == 0">未成交</span>-->
          <!--<span v-else-if ="over.status == 1 && over.sum > 0">部分成交</span>-->
          <!--<span v-else-if  ="over.status == 2">完全成交</span>-->
          <!--<img src="../../assets/r_jt.png" alt="">-->
          <!--</div>-->
        </div>
        <div class="content1">
          <div class="ns1">
            <p class="ws1">成交价格(USDT)</p>
            <p class="ws2">{{over.make_price}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">成交数量(BBZ)</p>
            <p class="ws2">{{over.num}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交额(USDT)</p>
            <p class="ws2">{{over.num1}}</p>
          </div>
        </div>
        <div class="content2">
          <div class="ns1">
            <p class="ws1">手续费(USDT)</p>
            <p class="ws2">{{over.fee}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">委托单号(BBZ)</p>
            <p class="ws2">{{over.uordersn}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交单号</p>
            <p class="ws2">{{over.fordersn}}</p>
          </div>
        </div>
      </div>
      <!-- <cube-recycle-list class="list"  :size="size" :on-fetch="onFetcha" :offset="offset">
            <template slot="item" slot-scope="{ data }">
            <div :id="data.id" class="item" @click="handleClick(data)">
                <div class="avatar" :style="{backgroundImage: 'url(' + (data.avatar || '') + ')'}"></div>
                <div class="bubble">
                <p>{{ data.msg }}</p>
                <div class="meta">
                    <time class="posted-date">{{ data.time }}</time>
                </div>
                </div>
            </div>
            </template>
      </cube-recycle-list>-->

      <p class="pull">{{newxin}}</p>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";
import { setTimeout } from 'timers';

export default {
  name: "asset",
  components: {
    Tabbar
  },
  data() {
    return {
      size: 50,
      offset: 100,
      indexs: 0,
      btn: ["当前委托", "历史委托", "成交明细"],
      items: [],
      overdata: [],
      newxin: "",
      page: 1,
      status: 0
    };
  },
  created: function() {
    this.getDate(1);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    getDate(status, s) {
      var limit = 10;

      this.$axios
        .post("/index/buy/myorder", {
          page: this.page,
          limit: limit,
          status: status
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0&&res.data.info) {

              for (var i = 0; i < res.data.info.length; i++) {
                var turn = String(res.data.info[i].sum);
                var result = "";
                turn.indexOf(".")!=-1?result = turn.substring(0, turn.indexOf(".") + 5):
                result = turn;
                res.data.info[i].sum = result;
              }
              s
                // ? (this.items = this.items.concat(res.data.info))
                // : (this.items = res.data.info);
                // res.data.info.length<9?this.newxin="已加载完所有数据":this.newxin="下拉更新";

                        var he=()=>{
                      for(var i=0; i<res.data.info.length; i++){
                        this.items.push(res.data.info[i])
                      }
                  }
                  !s&&res.data.info.length<9?(this.items=res.data.info,this.newxin="已加载完所有数据"):
                  !s&&res.data.info.length>9?(this.items=res.data.info,this.newxin="下拉更新"):"";
                  s&&res.data.info.length<9?(he(),this.newxin="已加载完所有数据")
                  :s?(he(),this.newxin="下拉更新"):'';

          } else {
            // s?(this.newxin="已加载完所有数据",this.page--):(this.items=[],
            // this.newxin="没有数据");
            !s?(this.newxin="没有数据",this.items = []):this.newxin="已加载完所有数据";
          }
        });
    },

    overlog(s) {
      var limit = 10;

      this.$axios
        .post("/index/buy/overlog", {
          page: this.page,
          limit: limit,
          status: ""
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {

              for (var i = 0; i < res.data.info.length; i++) {
                var oneturn =
                  res.data.info[i].num * res.data.info[i].make_price;
                var result =parseInt(Number(oneturn)*10000)/10000;
                res.data.info[i].num1 = result;
                res.data.info[i].make_price=parseInt(Number(res.data.info[i].make_price)*10000)/10000;
                res.data.info[i].num=parseInt(Number(res.data.info[i].num)*10000)/10000;
                res.data.info[i].fee=parseInt(Number(res.data.info[i].fee)*10000)/10000;
              }
              // s
                // ? (this.overdata = this.overdata .concat(res.data.info))
                // : (this.overdata = res.data.info);
                // res.data.info.length<9?this.newxin="已加载完所有数据":this.newxin="下拉更新";

                if(res.data.code==0&&res.data.info.length>0){
                var he=()=>{
                    for(var i=0; i<res.data.info.length; i++){
                      this.overdata.push(res.data.info[i])
                    }
                }
                !s&&res.data.info.length<9?(this.overdata=res.data.info,this.newxin="已加载完所有数据"):
                !s&&res.data.info.length>9?(this.overdata=res.data.info,this.newxin="下拉更新"):"";
                s&&res.data.info.length<9?(he(),this.newxin="已加载完所有数据")
                :s?(he(),this.newxin="下拉更新"):'';

              } else {
                !s?(this.newxin=""):this.newxin="已加载完所有数据";

              }}
        });
    },
    //撤单
    cancellations(id){
      this.$axios.post("/index/buy/repeal",{
        orderid:id
      })
      .then(res=>{
        console.log(res.data);
        if(res.data.code==0){
          this.$createToast({ txt: res.data.msg, type: "txt" ,time:1000}).show();
          setTimeout(()=>{
            this.getDate(1);
          },1000)
        }else if(res.data.msg){
          this.$createToast({ txt: res.data.msg, type: "txt" ,time:1000}).show();
        }
      })
    },
    tab(str) {
      this.page = 1;
      this.newxin="";
      this.indexs = str;
      this.items = "";
      this.overdata = "";
      if (this.indexs == 0) {
        this.status = 1;
        this.getDate(this.status);
      } else if (this.indexs == 1) {
        this.status = 2;
        this.getDate(this.status);
      } else if (this.indexs == 2) {
        this.overlog();
      }
    },
    //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        if (this.indexs == 2) {
          if (this.overdata.length > 9) {
            this.page++;
            this.overlog(this.page);
          }
        } else {
          if (this.items.length > 9) {
            this.page++;
            this.getDate(this.status, this.page);
          }
        }
        return false;
      }
    }
  },
  filters: {
    formatDate: function(value) {
      // console.log(value)

      let date = new Date(value * 1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return MM + "-" + d;
    },
    formatDate1: function(value) {
      // console.log(value)

      let date = new Date(value * 1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return h + ":" + m + ":" + s;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
}
.headtop {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
}
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.entrust {
  /* 限制视口 包裹组件*/
  .view-wrapper {
    padding-top: 1.6rem;
    width: 100%;
    .wt_block {
      padding: 0.533333rem 0.4rem;
      border-bottom: 1px solid #f1f1f1;
      .head {
        .f-flex();
        justify-content: space-between;
        .head_left {
          .nsb1 {
            color: #e56337;
            font-size: 0.453333rem;
            font-weight: bold;
            paddgin-right: 0.2rem;
          }
          .nsb2 {
            color: #00bd84;
            font-size: 0.453333rem;
            font-weight: bold;
            paddgin-right: 0.2rem;
          }
          .ns2 {
            color: #000;
            font-size: 0.453333rem;
            font-weight: bold;
          }
          .ns3 {
            color: #a1a7b7;
            font-size: 0.32rem;
          }
          .ns4 {
            color: #a1a7b7;
            font-size: 0.32rem;
          }
        }
        .head_right {
          button{
            padding: 0 .2rem;
          }
          .f-flex();
          span {
            color: #a1a7b7;
            font-size: 0.373333rem;
            font-weight: bold;
            padding-right: 0.266667rem;
          }
          img {
            width: 0.2rem;
            height: 0.3rem;
          }
        }
      }
      .content1 > .ns1 {
        width: 35%;
      }
      .content1 > .ns2 {
        width: 30%;
      }
      .content1 > .ns3 {
        width: 35%;
      }
      .content1 > .ns3 > .ws1 {
        text-align: right;
      }
      .content2 > .ns1 {
        width: 35%;
      }
      .content2 > .ns2 {
        width: 30%;
      }
      .content2 > .ns3 {
        width: 35%;
      }
      .content2 > .ns3 > .ws1 {
        text-align: right;
      }
      .content1 {
        margin-top: 0.533333rem;
        .f-flex();
        justify-content: space-between;
        .ns1 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns2 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns3 {
          text-align: right;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
            text-align: right;
          }
        }
      }
      .content2 {
        .f-flex();
        margin-top: 0.273333rem;
        justify-content: space-between;
        .ns1 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns2 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns3 {
          text-align: right;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
            text-align: right;
          }
        }
      }
    }
  }
  .b-back {
    position: absolute;
    left: 0.4rem;
    top: 0.3rem;
    height: 1.6rem;
    img {
      width: 0.213333rem;
      height: 0.373333rem;
    }
  }
  .xiaohua {
    width: 0.506667rem;
    position: absolute;
    right: 0.4rem;
    top: 0.6rem;
  }
  .w_tab {
    height: 1.6rem;
    .f-flex();
    justify-content: center;
    .tab1 {
      color: #737a92;
      border: 1px solid#c3c6cf;
      position: relative;
      font-size: 0.373333rem;
      height: 0.88rem;
      width: 2.133333rem;
      line-height: 0.88rem;
      text-align: center;
    }
    .tab1.active {
      background-color: #f57d13;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>

